<template>
  <view class="tab-section">
    <view class="tab-list">
      <view
        class="tab-item"
        v-for="(item, index) in classifyList"
        :key="index"
        @click="handleTab(item, index)"
        :class="[
          activeTab == index ? 'tab-active' : '',
          tabStyle == 3 ? 'subtitleTabActive' : '',
        ]"
      >
        <view
          class="tab-name"
          :style="{
            color:
              activeTab == index ? propsData.params.subtitleTab.titleColor : '',
          }"
          >{{ item.title }}</view
        >
        <view class="subtitle" :style="[subtitleActiveStyle(index)]">{{
          item.subTitle
        }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    classifyList: {
      type: Array,
      default: [],
    },
    activeTab: {
      type: Number,
      default: 0,
    },
    propsData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },

  computed: {
    tabStyle() {
      return this.propsData.params.tabStyle;
    },
    subTitleColor() {
      return this.propsData.params.subtitleTab.subTitleColor || "";
    },
    activeColor() {
      return this.propsData.params.subtitleTab.activeColor || "";
    },
    activeStyle() {
      return this.propsData.params.subtitleTab.activeStyle || "";
    },
    defaultSubTitleColor() {
      return this.propsData.params.subtitleTab.defaultSubTitleColor || "";
    },
  },
  methods: {
    handleTab(item, index) {
      this.$emit("changeTab", { item, index });
    },
    subtitleActiveStyle(index) {
      if (this.activeTab != index) {
        return {
          color: this.defaultSubTitleColor,
        };
      } else {
        let obj = {
          color: this.subTitleColor,
        };
        if (this.propsData.params.tabStyle == 3) {
          obj.background = this.activeColor;
        }
        return obj;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.tab-section {
  width: 100%;
  display: flex;
  justify-content: center;
}
.tab-list {
  width: 93.6%;
  height: 13.6vw;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  // justify-content: space-around;
  .tab-item {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: 8%;
    flex-shrink: 0;
    .tab-name {
      font-size: 4vw;
      font-family: PingFang SC;
      font-weight: 600;
      color: #000000;
    }
    .subtitle {
      font-size: 3.2vw;
      font-family: PingFang SC;
      font-weight: 400;
      color: #888888;
    }
  }
  .tab-item:last-child {
    margin-right: 0;
  }
  .tab-active {
    .tab-name {
      color: #fa2c1b;
    }
  }
  .subtitleTabActive {
    .subtitle {
      border-radius: 2.4vw;
      height: 4.8vw;
      line-height: 4.8vw;
      padding: 0 1.67vw;
    }
  }
}
.tab-list::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
</style>
